<template>
  <page-header-wrapper :title="false">
    <a-card :bordered="false" :style="{margin:'0 -24px',padding:0}">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="选择年份">
                <a-date-picker
                  mode="year"
                  placeholder="请选择年份"
                  format="YYYY"
                  :value="time"
                  :open="yearPickShow"
                  @change="alt"
                  @panelChange="handlePanelChange"
                  @openChange="handleOpenChange" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="选择季度">
                <a-select :allowClear="true" v-model="formData.season" placeholder="请选择" default-value="0">
                  <a-select-option value="1">第一季度</a-select-option>
                  <a-select-option value="2">第二季度</a-select-option>
                  <a-select-option value="3">第三季度</a-select-option>
                  <a-select-option value="4">第四季度</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="23" :sm="24">
              <span class="table-page-search-submitButtons" style="float: right;">
                <a-button type="primary" @click="$refs.table.refresh(true)">筛选</a-button>
                <a-button style="margin-left: 8px" @click="emptyFormData">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
        <div class="table-page-search-wrapper">
          <template>
            <s-table
              ref="table"
              size="default"
              rowKey="season"
              :columns="columns"
              :data="loadData">
              <span slot="serial" slot-scope="text, record, index">
                {{ index + 1 }}
              </span>
              <span slot="season" slot-scope="text, record">
                <template>
                  {{ record.season === 1 ? '第一季度' : record.season === 2 ? '第二季度' : record.season === 3 ? '第三季度' : '第四季度' }}
                </template>
              </span>
              <span slot="action" slot-scope="text, record">
                <template>
                  <a v-if="record.status === 0" @click="handleEdit(record)">审核展示</a>
                  <a-divider v-if="record.status === 0" type="vertical"/>
                  <a v-if="record.status === 1" v-action:show_cancel @click="handleEdit(record)">展示取消</a>
                </template>
              </span>
            </s-table>
          </template>
        </div>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import {
    seasonCount,
    showCancel
  } from '@/api/bank'
  import {
    STable
  } from '@/components'
  import { message } from 'ant-design-vue'
  let self
  export default {
    name: 'AdminRankData',
    components: {
      STable
    },
    data () {
      return {
        data: [],
        pagination: {},
        loading: false,
        yearPickShow: false,
        isLoading: false,
        time: '',
        formData: {
          year: '',
          season: '',
          page: 1,
          per_page: 10
        },
        // 表头
        columns: [{
            title: '排名年份',
            dataIndex: 'year'
          },
          {
            title: '季度',
            scopedSlots: { customRender: 'season' }
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 列表组件 加载家风银行列表
        loadData: async parameter => {
          try {
            this.formData['year'] = this.formData.year?._d ? this.formData.year?._d.getFullYear() : ''
          } catch {}
          const params = {
            page: parameter.pageNo,
            per_page: parameter.pageSize,
            year: this.formData.year,
            season: this.formData.season
          }
          // this.formData['per_page'] = parameter.pageSize
          const res = await seasonCount(params)
          const result = {
            pageNo: res.current_page,
            totalPage: res.last_page,
            data: res.data,
            pageSize: 10,
            totalCount: res.total
          }
          return Promise.resolve(result)
        },
        options: {
          alert: {
            show: true,
            clear: () => {
              this.selectedRowKeys = []
            }
          },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange
          }
        }
      }
    },
    filters: {

    },
    mounted () {
    },
    created () {
      self = this
    },
    computed: {
    },
    methods: {
      alt () {
        // 清空年份数据
        self.time = ''
        this.formData.year = undefined
      },
      emptyFormData () {
        self.formData = {
          year: '',
          season: '',
          page: 1,
          per_page: 10
        }
        self.time = ''
        this.$refs.table.refresh(true)
      },
      handleOpenChange (status) {
        // 监听年份日历被打开
        self.yearPickShow = status
      },
      // 得到年份选择器的值
      handlePanelChange (value) {
        self.formData.year = value
        self.time = value
        self.yearPickShow = false
      },
      onShowSizeChange (current, pageSize) {
        this.page.pageSize = pageSize
      },
      handleEdit (ev) {
        // 审核展示（审核/取消）
        self.isLoading = true
        this.$refs.table.localLoading = true
        showCancel({ 'data_id': ev.data_id }).then((res) => {
          this.$refs.table.localLoading = false
          self.isLoading = false
          if (res.is_ok === 'Y') {
            message.success('操作完成')
            self.$refs.table.refresh(true)
          }
        }).catch(() => {
          self.isLoading = false
          this.$refs.table.localLoading = false
        })
      }
    }
  }
</script>
